<template>
  <view class="page">
    <view class="header">
      <!-- 左v1.01 -->
      <view class="version">
        <text class="version_text"> {{ version }} </text>
      </view>
      <!-- 中 -->
      <view class="lock">
        <view
          v-for="(item, index) in lockData"
          :key="index"
          class="lock_box"
        >
          <!-- 前面的图片 -->
          <view class="left">
            <image
              :src="temp"
              mode="scaleToFill"
              class="left_iocn"
            />
          </view>
          <view class="middle">
            <text class="middle_text">{{ item.code }}</text>

            <text class="middl_bottom_text">{{ item.temp }}</text>
          </view>
          <view class="middle_bottom"> </view>
          <!-- <view class="right">
            <text class="right_text">℃</text>
          </view> -->
        </view>
      </view>
    </view>
    <!-- 前面8个盒子 -->
    <view class="content">
      <!-- 渲染前四个 -->
      <view class="switch_top">
        <view
          v-for="(item, index) in switchBoxdata"
          v-if="index < 4"
          :key="index"
          class="switch_box"
          :class="{ active1: isActive1(item) }"
          @tap="getcontrol1(item, item.CmdType, item.status, index)"
        >
          <image
            class="switch_img"
            :src="getImgSrc(item)"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
      </view>
      <!-- 渲染后四个 -->
      <view class="switch_bottom">
        <view
          v-for="(item, index) in switchBoxdata"
          :key="index"
          v-if="index >= 4 && index < 8"
          class="switch_box"
          :class="{ active1: isActive1(item) }"
          @tap="getcontrol1(item, item.CmdType, item.status, index)"
        >
          <image
            class="switch_img"
            :src="getImgSrc(item)"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!--  后面8个盒子-->
    <view class="content2">
      <view class="switch_top">
        <view
          v-for="(item, index) in switchBoxdata2"
          :key="index"
          v-if="index >= 1 && index < 7"
          class="switch_box"
          :class="{ active2: isActive1(item) }"
          @tap="getcontrol2(item, item.CmdType, item.status, index)"
        >
          <image
            class="switch_img"
            :src="getImgSrc(item)"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
      </view>
      <!-- 底部两个 -->
      <view class="switch_bottom2">
        <!-- 用第二个开关的数据 -->
        <view
          v-for="(item, index) in switchBoxdata2"
          :key="index"
          v-if="index >= 6 && index < 8"
          class="switch_box"
          :class="{ active2: isActive1(item) }"
          @tap="getcontrol2(item, item.CmdType, item.status, index)"
        >
          <image
            class="switch_img"
            :src="getImgSrc(item)"
            mode="scaleToFill"
          />
          <text class="switch_text">{{ item.text }}</text>
        </view>
        <!-- 输入值 -->
        <view class="switch_box">
          <image
            class="switch_img"
            :src="getIconSrc"
            mode="scaleToFill"
          />
          <text class="switch_text">Input1</text>
        </view>
        <!-- <view class="btn_box">
          <view>设置</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
  // cmd命令控制类型-写死
  const CmdType = {
    PowerSwitch: 1,
    LightSwitch: 2,
    FreezeSwitch: 3,
    ChillSwitch: 4,
    XF1Switch: 5,
    XF2Switch: 6,
    Booking: 7,
    AutoOrManual: 8,
    DeviceStatus: 9,
    DeviceTime: 10,
    AutoCurve: 11,
    InnerReference: 12,
    Reset: 13,
    APPSendOTAPackage: 14,
  }
  // value的值-写死
  const CLOSE = false
  const OPEN = true
  // 图片背景
  import officon from './asset/off.png'
  import onicon from './asset/on.png'
  import temp from './asset/temp.png'
  // 请求的中间方法
  import getPrefixAndControl from '../../controlpkg/util/getPrefixAndControlTest'
  // 请求直接方法
  import { deviceControl } from '@/api/system/equiment/equipmenttest.js'

  // 解析数据方法
  import parsingData from '../../utils/parsingDatatest'
  // 进制数据转换方法
  import parsingData2 from '../../utils/data_conversiontest'

  // mqtt协议库
  import { MQTT_IP, MQTT_OPTIONS } from '@/utils/mqtt.js'
  // mqtt的连接常量
  var Paho = require('../../utils/paho-mqtt')
  import getdateTime from '../../utils/getdateTime'
  // mqtt的常量连接
  // import Paho from 'paho-mqtt'
  export default {
    components: {},
    data() {
      return {
        // cmd语义
        CmdType: {
          PowerSwitch: 1,
          LightSwitch: 2,
          FreezeSwitch: 3,
          ChillSwitch: 4,
          XF1Switch: 5,
          XF2Switch: 6,
          Booking: 7,
          AutoOrManual: 8,
          DeviceStatus: 9,
          DeviceTime: 10,
          AutoCurve: 11,
          InnerReference: 12,
          Reset: 13,
          APPSendOTAPackage: 14,
        },
        //value值
        open: false,
        close: false,
        // 版本和时间
        dateTime: '2024/05/20 15:20周二',
        version: 'v1.01',
        // 开关图
        officon,
        onicon,
        temp,
        // 输入的状态
        inputstatus: 'false',
        // 选中状态
        activeIndex1: 1,
        activeIndex2: 3,

        // 温度值
        lockData: [
          { code: '10', temp: 'TC1' },
          { code: '10', temp: 'TC2' },
          { code: '10', temp: 'TC3' },
          { code: '10', temp: 'TC4' },
          { code: '10', temp: 'TC5' },
          { code: '10', temp: 'TC6' },
          { code: '10', temp: 'TC7' },
        ],
        //开关值-8个
        switchBoxdata: [
          {
            text: 'stream',
            // 图片状态和value状态
            status: false,
            //  图片切换
            image: officon,
            image2: onicon,
            // 后台命令行
            CmdType: 3,
          },
          {
            text: 'lamp',
            image: officon,
            CmdType: 4,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'cooling',
            image: officon,
            CmdType: 5,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'aux1',
            image: officon,
            CmdType: 6,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'aux2',
            image: officon,
            CmdType: 7,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'aux3',
            image: officon,
            CmdType: 8,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'heat',
            image: officon,
            CmdType: 9,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: '蜂鸣器',
            image: officon,
            CmdType: 12,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
        ],
        // 开关值-8个
        switchBoxdata2: [
          {
            text: '温度校准',
            image: officon,
            DeviceStatus: 9,
            CmdType: 13,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: '输出',
            image: officon,
            CmdType: 18,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'T1',
            image: officon,
            CmdType: 18,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'T2',
            image: officon,
            CmdType: 19,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'T3',
            image: officon,
            CmdType: 20,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'B1',
            image: officon,
            CmdType: 21,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'B2',
            image: officon,
            CmdType: 22,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
          {
            text: 'B3',
            image: officon,
            CmdType: 23,
            status: false, // 初始状态为关闭
            image2: onicon,
          },
        ],
        // 协议的字段
        // equipmentNo: '0DD7D9967724BE94',

        // equipmentTypeId: '99999998',
        // // 订阅主题
        // subTopic: 'SERVER.99999998.0DD7D9967724BE94',

        // equipmentNo: uni.getStorageSync('equipmentNo'), //uni.getStorageSync("equipmentNo"),
        // equipmentTypeId: uni.getStorageSync('equipmentTypeId'), //uni.getStorageSync("equipmentTypeId"),
        // subTopic: uni.getStorageSync('subTopic'),

        equipmentNo: '', //uni.getStorageSync("equipmentNo"),
        equipmentTypeId: '', //uni.getStorageSync("equipmentTypeId"),
        // 这个订阅主题不能带.号
        subTopic: '',
        // mqtt的连接实例
        client: null,
        // 订阅主题
        onTopic: 'test',
        Qos: 2,
        // 发布主题-演示用的
        onSub: 'test',
        // 确定定时器
        Testtime: null,

        // 监听的开关状态
        switchstatus1: [],
        switchstatus2: [],

        MQTT_IP: 'wss://mk-iot.com/mqttwss',
      }
    },
    methods: {
      // 轮询获取设备接口
      getIndexData(CmdType) {
        // console.log('下发操作开个', CmdType)
        this.Testtime = setInterval(async () => {
          //进入界面链接mqtt后自动订阅
          const success = await getPrefixAndControl.getConfigList(
            this.equipmentTypeId,
            this.equipmentNo,
            // CmdType.AutoOrManual,
            CmdType,
            OPEN
          )
          // console.log('test下发的状态2', success)
          if (success.code != 200) {
            this.$modal.msgError('下发失败')
          }
        }, 2000)
      },
      // 测试订阅方法
      // subscribe: function () {
      //   // 判断是否已成功连接
      //   if (!this.client || !this.client.connected) {
      //     this.showToast('客户端未连接', 1000)
      //     return
      //   }

      //   this.client.subscribe(
      //     this.onTopic,
      //     {
      //       qos: this.Qos,
      //     },
      //     (error, res) => {
      //       if (!error) {
      //         this.showToast('test订阅成功', 1000, 'success')
      //         console.log('test订阅成功')
      //         console.log('test订阅后返回的消息', res)
      //         // 调用监听数据的方法
      //         this.watch()
      //         // console.log('订阅后返回的消息的字段', res[0].topic)
      //         // this.receiveMessage = res[0].topic
      //         // this.client.on('message', (topic, message) => {
      //         //   console.log('收到的消息', topic)
      //         //   console.log('收到来自' + topic + '的消息' + message.toString())
      //         //   this.receiveMessage = message
      //         // })
      //       }
      //     }
      //   )

      //   //订阅多个主题
      //   // this.client.subscribe(
      //   //   ['one', 'two', 'three'],
      //   //   { qos: 1 },
      //   //   (err, msg) => {
      //   //     console.log(err || '订阅成功')
      //   //     console.log(msg)
      //   //   }
      //   // )
      //   // 订阅不同 qos 的不同主题
      //   //    this.client.subscribe(
      //   // 	        [
      //   // 	            { hello: 1 },
      //   // 	            { 'one/two/three': 2 },
      //   // 	            { '#': 0 }
      //   // 	        ],
      //   // 	        (err) => {
      //   // 	          this.show();console.log(err || '订阅成功')
      //   // 	        },
      //   // 	    )

      //   // });
      // },
      // 跳转订阅方法
      subscribe: function (serverString) {
        // 判断是否已成功连接
        if (!this.client || !this.client.connected) {
          this.showToast('客户端未连接', 1000)
          return
        }
        this.client.subscribe(
          serverString,
          {
            qos: this.Qos,
          },
          (error, res) => {
            if (!error) {
              // this.showToast('订阅成功', 1000, 'success')
              console.log('跳转主题的订阅成功')
              console.log('跳转订阅后返回的消息', res)
              // 调用监听数据的方法
              this.watch()
              // console.log('订阅后返回的消息的字段', res[0].topic)
              // this.receiveMessage = res[0].topic
              // this.client.on('message', (topic, message) => {
              //   console.log('收到的消息', topic)
              //   console.log('收到来自' + topic + '的消息' + message.toString())
              //   this.receiveMessage = message
              // })
            }
          }
        )
      },

      // 监听并且数据解析方法
      watch: function () {
        // 监听来自mq服务器的消息
        this.client.on('message', (topic, message) => {
          // console.log('返回的消息', message)
          let newmessage = message.toString('utf-8')
          console.log('格式处理数据', newmessage)

          // this.receiveMessage = message
          this.parsedata(newmessage)
        })
      },
      // 解析返回mq返回的数据
      parsedata(msg) {
        // console.log('接受test的连接的原始数据', msg)
        var that = this
        console.log('test订阅subTopic主题', that.subTopic)
        console.log('接收mq的消息', msg)
        // const data = JSON.parse(msg.payloadString.replace(/\u0000*$/, ''))
        const data = JSON.parse(msg.replace(/\u0000*$/, ''))
        console.log('去除空格的消息', data)

        if (data != null) {
          // 最新数据解析
          // console.log('要解析的最终数据', data.Data)
          console.log('要解析的最终数据', data.payloadString.Data)
          // console.log('要解析的最终数据字段数据', data.Data.version)

          // 更新数据模型
          that.version = data.payloadString.Data.version
          that.dateTime = data.payloadString.Data.dateTime

          console.log('日期数据', that.dateTime)
          // 更新输入状态
          // that.inputstatus = data.Data.SR
          that.inputstatus = data.payloadString.Data.SR === 1 ? true : false
          console.log('输入数据状态', that.inputstatus)
          //  更新温度数据
          let var1 = data.payloadString.Data.TC1
          let var2 = data.payloadString.Data.TC2
          let var3 = data.payloadString.Data.TC3
          let var4 = data.payloadString.Data.TC4
          let var5 = data.payloadString.Data.TC5
          let var6 = data.payloadString.Data.TC6
          let var7 = data.payloadString.Data.TC7
          let tempArray = [var1, var2, var3, var4, var5, var6, var7]

          // 使用 for 循环更新 lockData
          // for (let i = 0; i < that.lockData.length; i++) {
          //   that.lockData[i].code = tempArray[i]
          // }

          // 就是将温度数组里面的数据赋值给lockData的code
          if (tempArray.length === that.lockData.length) {
            // 使用 map 来创建新的 lockData 数组，其中每个对象的 code 属性由 tempArray 提供
            that.lockData = that.lockData.map((item, index) => ({
              ...item,
              code: tempArray[index],
            }))
          } else {
            console.error('tempArray 和 lockData 长度不匹配')
          }
          console.log('温度数组', tempArray)
          // console.log('温度的状态', that.lockData)
          //更新继电器状态到继电器数组里去
          let status = []
          // let status1 = []
          // let status2 = []
          // 上面10个
          let status1 = parsingData.getAllBits(data.payloadString.Data.jdq1, 2)
          console.log('解析的第一个状态', status1)
          let status2 = parsingData.getAllBits(data.payloadString.Data.jdq1, 3)
          let status3 = parsingData.getAllBits(data.payloadString.Data.jdq1, 4)
          let status4 = parsingData.getAllBits(data.payloadString.Data.jdq1, 5)
          let status5 = parsingData.getAllBits(data.payloadString.Data.jdq1, 6)
          let status6 = parsingData.getAllBits(data.payloadString.Data.jdq1, 7)
          let status7 = parsingData.getAllBits(data.payloadString.Data.jdq1, 8)
          let status8 = parsingData.getAllBits(data.payloadString.Data.jdq1, 11)

          // 下面六个
          let status9 = parsingData.getAllBits(data.payloadString.Data.jdq1, 10)
          let status10 = parsingData.getAllBits(
            data.payloadString.Data.jdq1,
            11
          )
          let status11 = parsingData.getAllBits(data.payloadString.Data.jdq2, 0)
          let status12 = parsingData.getAllBits(data.payloadString.Data.jdq2, 1)
          let status13 = parsingData.getAllBits(data.payloadString.Data.jdq2, 2)
          let status14 = parsingData.getAllBits(data.payloadString.Data.jdq2, 3)
          let status15 = parsingData.getAllBits(data.payloadString.Data.jdq2, 4)
          let status16 = parsingData.getAllBits(data.payloadString.Data.jdq2, 5)
          // 结构赋值到一个总数组里
          // status.push(...status1, ...status2)
          status.push(
            status1,
            status2,
            status3,
            status4,
            status5,
            status6,
            status7,
            status8,
            status9,
            status10,
            status11,
            status12,
            status13,
            status14,
            status15,
            status16
          )
          // // 去掉拼接中的,号
          that.switchstatus = status
          console.log('解析数据的状态数组', that.switchstatus)
          // // 调用更新数据状态方法

          if (this.switchstatus.length == 16) {
            // this.executeMethod();

            // 没有执行这个方法
            that.updateSwitchBoxDataStatus()
            // 强制更新
            this.$forceUpdate()
          }
          // that.$nextTick(() => {
          //   // 强制更是视图
          //   // that.$forceUpdate()
          // })
        }
      },
      // 更新页面的状态的方法
      updateSwitchBoxDataStatus() {
        // 一个数组直接更新
        // this.switchBoxdata.forEach((item) => {
        //   item.status = newStatus
        // })
        console.log('已经解析好的状态', this.switchstatus)
        this.switchBoxdata.forEach((item, index) => {
          // if (index < 10) {
          // 只处理前10个元素
          item.status = this.switchstatus[index]
          // console.log('取', item.status)
          console.log('已经解析好的状态123', this.switchstatus[index])

          // }
        })

        // 更新后6个状态到 switchBoxdata2
        this.switchBoxdata2.forEach((item, index) => {
          // 从第10个开始（即索引9），直到第15个（即索引14）
          // if (index < 6) {
          item.status = this.switchstatus[8 + index]
          // }
        })
        console.log('盒子的数据1', this.switchBoxdata)
        console.log('盒子的数据2', this.switchBoxdata2)
      },

      // 取消订阅方法
      unsubscribe: function () {
        this.client.unsubscribe(
          // topic, topic Array, topic Array-Onject
          // ['one', 'two', 'three'],
          this.onTopic,
          (err) => {
            console.log(err || '取消订阅成功')
            // this.showToast('取消订阅成功', 1000, 'success')
          }
        )
      },
      // 直接订阅的方法
      // 根据图片的状态切换图片
      getImgSrc(item) {
        // 根据status属性返回对应的图片路径
        return item.status ? item.image2 : item.image
      },
      // 根据状态切换样式
      isActive1(item) {
        return item.status
      },
      // 监听的方法
      // 调用设备的接口-开关
      getcontrol1: async function (item, cmd, status, index) {
        //  测试更改图片状态
        // item.status = !item.status
        // // 更改切换的样式
        // if (item.status) {
        //   this.activeIndex1 = index
        // }

        console.log('传入的index', index)
        // 更改传入的状态
        const success = await getPrefixAndControl.controlCmd(
          this.equipmentTypeId,
          this.equipmentNo,
          // CmdType.AutoOrManual,
          cmd,
          // item.status
          !status
          // CLOSE
          // JSON.stringify(data)
        )
        console.log('调用接口的返回', success)
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },
      getcontrol2: async function (item, cmd, status, index) {
        //  更改图片的状态

        console.log('传入的index', index)
        // 更改传入的状态
        const success = await getPrefixAndControl.controlCmd(
          this.equipmentTypeId,
          this.equipmentNo,
          // CmdType.AutoOrManual,
          cmd,
          // item.status
          !status
          // CLOSE
          // JSON.stringify(data)
        )
        console.log('调用接口的返回', success)
        if (success.code != 200) {
          this.$modal.msgError('下发失败')
        }
      },

      // 弹框方法
      showToast: function (title, time, icon = 'none') {
        uni.showToast({
          title: title,
          icon: icon,
        })
        setTimeout(function () {
          uni.hideToast()
        }, time)
      },
    },

    onLoad(options) {
      const deviceId = options.id
      const deviceNumber = options.number
      // 全局变量中的实例
      const devicecilent = getApp().globalData.devicecilent
      // 更新全局变量

      // 客户端实例的cliendid然后拼接设备编号
      let cliendid = devicecilent.options.clientId
      // const serverString = `SERVER.${deviceId}.${deviceNumber}`
      // const serverString = `SERVER_${deviceId}_${deviceNumber}`
      // 这个是订阅主题的
      const serverString = `SERVER/${deviceId}/${deviceNumber}`
      // 这个是修改的格式
      // const serverString = `${cliendid}${deviceNumber}`

      this.client = devicecilent
      this.equipmentTypeId = deviceId
      this.equipmentNo = deviceNumber
      console.log('设备编号', deviceNumber)
      // this.subTopic = serverString
      // 使用这些参数进行后续操作
      console.log('设备ID:', this.equipmentTypeId)
      console.log('设备编号:', this.equipmentNo)
      console.log('拼接后的主题字符串', serverString)
      // console.log('拼接后的主题字符串this的',      this.subTopic)
      console.log('全局变量的cilent实例', devicecilent)
      // 直接调用订阅方法
      this.subscribe(serverString)
    },
    onShow() {
      // 首次打印的客户端实例
      console.log('首次的客户端实例', this.client)
    },
    onUnload() {
      // this.client.disconnect()
      clearInterval(this.Testtime)
      this.unsubscribe()
      console.log('执行了onunload订阅断开连接')
    },
    //测试用的

    onHide() {
      clearInterval(this.realTime)
      clearInterval(this.Testtime)
      console.log('执行了onHide订阅断开连接')
    },
    onReady() {},
    // 计算输入框返回的图片
    computed: {
      getIconSrc() {
        return this.inputstatus ? this.onicon : this.officon
      },
    },

    // 转发到朋友和企业微信
    onShareAppMessage(res) {
      // 通过button按钮触发
      if (res.from === 'button') {
        console.log(res.target)
      }
      return {
        title: '安卓版测试按钮', //分享标题
        path: '/test/test/test', //分享链接
      }
    },
  }
</script>

<style lang="scss" scoped>
  // 变量抽离
  :root {
    // 背景
    // --primary-bg-color: rgb(65, 89, 118);
    // --primary-bg-color: rgb(47, 47, 47);
    // 图片宽高
    --switch-img-width: 102rpx;
    --switch-img-height: 98rpx;
    // 盒子的大小和边界
    --switch-box-width: 154rpx;
    --box-padding: 23rpx;
    --box-radius: 24rpx;
  }

  .page {
    padding-left: var(--box-padding);
    padding-right: var(--box-padding);

    // 头部
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // 子绝父相
      position: relative;
      // background-color: var(--primary-bg-color);
      // background-color: #7db57d;
      // border: 1rpx solid #7db57d;
      background-image: linear-gradient(to bottom, #e3ffed, #b9f0b9);
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      height: 150rpx;
      width: 710rpx;
      // box-shadow: 0 5rpx 3rpx rgba(244, 237, 235, 0.3), 3rpx 4rpx 3rpx rgba(212, 219, 236, 0.3);
      // border-radius: var(--box-radius);

      .version {
        position: absolute;
        // margin-left: 12rpx;
        white-space: nowrap;
        bottom: 100rpx;
        background: #62b962;
        width: 201rpx;
        height: 44rpx;
        // 让子盒子垂直居中

        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        .version_text {
          // left: 50%;
          // 给个间距居中

          // 我写的
          width: 149rpx;
          height: 35rpx;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 500;

          // font-size: 24rpx;
          font-size: 33rpx;
          color: #ffffff;
          line-height: 35rpx;

          left: 56rpx;
          position: absolute;
        }
      }

      .lock {
        position: absolute;
        top: 64rpx;
        // left: 38rpx;
        left: 19rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // width: 700rpx;
        width: 702rpx;
        // gap: 27rpx;
        // gap: 9.25rpx;

        .lock_box {
          // width: 90rpx;
          width: 101rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;

          .left {
            position: absolute;
            // left: 10rpx;
            // left: -34rpx;
            // // top: 1rpx;
            // top: 15rpx;
            // left: -38rpx;
            // left: -11rpx;
            left: -13rpx;
            // top: 8rpx;
            top: 13rpx;
            // margin-left: 1rpx;
            width: 15rpx;
            height: 29rpx;

            // background: #646464;
            .left_iocn {
              //
              width: 20rpx;
              height: 41rpx;
            }
          }

          .middle {
            width: 20rpx;
            display: flex;
            flex-direction: column; /* 垂直排列子元素 */
            justify-content: center; /* 水平居中 */
            // align-items: center; /* 垂直居中 */
            height: 100%;
            // position: relative;

            .middle_text {
              font-size: 28rpx;
              width: 45rpx;
              height: 32rpx;
              // 字体大小颜色
              font-family: OPPOSans, OPPOSans;
              font-weight: 700;
              // font-size: 24rpx;
              // font-size: 37rpx;
              font-size: 34rpx;
              color: #000000;
              font-style: normal;
              text-transform: none;
              // 字数是两位数
              margin-left: 5rpx;
            }
            // 后面的度数
            .middle_text ::after {
              content: '℃';
              font-size: 25rpx;
              color: #646464;
              font-style: normal;
              text-transform: none;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
            }
          }
          // 前面图标
          // .middle::before {
          //   content: '';
          //   // 定位
          //   // position: absolute;
          //   // left: -20rpx;
          //   // top: 11rpx;

          //   // background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/automatic.png);
          //   background: url(https://mkservice.mk-iot.com/subFile/mk2240/automatic.png)
          //     no-repeat;
          //   width: 20rpx;
          //   height: 20rpx;
          //   background-size: cover;
          // }

          .middl_bottom_text {
            font-size: 24rpx;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            // font-size: 18rpx;
            font-size: 26rpx;
            color: #646464;
            line-height: 25rpx;
            letter-spacing: 3px;
            text-align: left;
            font-style: normal;
            // text-transform: none;
            // transform: translatex(-50px);
            // transform: translatey(-50px);
            // // 间距微调
            margin-top: 10rpx;
            margin-left: 8rpx;

            // position: absolute;
          }

          // .middle_bottom {
          //   position: absolute;
          //   // left: 10rpx;
          //   // left: -34rpx;
          //   // // top: 1rpx;
          //   // top: 15rpx;
          //   // left: -38rpx;
          //   left: -11rpx;
          //   top: 8rpx;
          //   .middl_bottom_text {
          //   }
          // }
          .right {
            position: absolute;
            // width: 20rpx;
            width: 15rpx;
            left: 32rpx;
            top: 7rpx;
            // margin-left: 45rpx;
            .right_text {
              width: 20rpx;
              height: 24rpx;
              font-family: OPPOSans, OPPOSans;
              font-weight: 500;
              // font-size: 18rpx;
              font-size: 25rpx;
              color: #646464;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
    // 底部两盒子
    .content,
    .content2 {
      // 布局方式
      display: flex;
      flex-direction: column;
      align-items: center;
      // 背景
      background-color: var(--primary-bg-color);
      height: 590rpx;
      width: 710rpx;
      // box-shadow: 0 5rpx 3rpx rgba(244, 237, 235, 0.3), 3rpx 4rpx 3rpx rgba(212, 219, 236, 0.3);
      border-radius: var(--box-radius);
      // 间距
      // margin-top: 50rpx;
      margin-top: -49rpx;

      .switch_top {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 100rpx;
        gap: 35rpx;

        .switch_box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: var(--switch-box-width);
          // 背景色
          background: #ffffff;
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #e7e7e7;
          // 切换后的背景色
          // border: 2px solid #0ee80c;

          .switch_img {
            // 背景
            width: var(--switch-img-width);
            height: var(--switch-img-height);
            // 间距
            margin-top: 10rpx;
          }

          .switch_text {
            margin-top: 10rpx;
            // 设计样式
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32rpx;
            color: #3d3d3d;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .switch_box.active1 {
          /* 切换后的背景色 */
          border: 2px solid #0ee80c;
        }
        .switch_box.active2 {
          /* 切换后的背景色 */
          border: 2px solid #0ee80c;
        }
      }
      // 上栏底部
      .switch_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 113rpx;
        gap: 35rpx;
        // margin-right: 74rpx;

        .switch_box {
          width: var(--switch-box-width);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          background: #ffffff;
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #e7e7e7;
          // 切换后的背景色
          // border: 2px solid #0ee80c;

          .switch_img {
            width: var(--switch-img-width);
            height: var(--switch-img-height);
            margin-top: 10rpx;
          }

          .switch_text {
            margin-top: 10rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32rpx;
            color: #3d3d3d;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        // 切换后的背景
        .switch_box.active1 {
          /* 切换后的背景色 */
          border: 2px solid #0ee80c;
        }

        .btn_box {
          margin-left: 300rpx;
        }
      }
      // 下栏底部
      .switch_bottom2 {
        display: flex;
        justify-content: flex-start; /* 让内容从左开始排列 */
        align-items: center;
        gap: 35rpx; /* 设置盒子之间的间距，确保前两个盒子和第三个盒子有间隔 */
        margin-top: 128rpx;
        // margin-left: -86rpx;
        margin-left: -192rpx;

        .switch_box {
          width: var(--switch-box-width);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          background: #ffffff;
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #e7e7e7;
          // 切换后的背景色
          // border: 2px solid #0ee80c;

          .switch_img {
            width: var(--switch-img-width);
            height: var(--switch-img-height);
            margin-top: 10rpx;
          }

          .switch_text {
            margin-top: 10rpx;
            // 设计字体
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 32rpx;
            color: #3d3d3d;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .switch_box.active2 {
          /* 切换后的背景色 */
          border: 2px solid #0ee80c;
        }

        .btn_box {
          margin-left: 100rpx; /* 调整第三个盒子的间距，确保其与前面两个盒子有间隔 */
        }
      }
    }
  }
</style>
